<template>
  <div class="two-ring">
    <div class="money-wrap">
      <div class="title-box">引资完成占比</div>
      <div class="money-chart">
        <Echarts :options="moneyOptions" height="100%" width="100%"> </Echarts>
      </div>
      <div class="item">
        <!-- <div class="tip"
          v-for="(item, index) in moneyList"
          :key="index"
        >
          {{item}}
        </div> -->
      </div>
    </div>
    <div class="project-wrap">
      <div class="title-box">项目完成占比</div>
      <div class="money-chart">
        <Echarts :options="proOptions" height="100%" width="100%"> </Echarts>
      </div>
      <div class="item">
        <!-- <div class="tip"
          v-for="(item, index) in proList"
          :key="index"
        >
          {{item}}
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue"
import cockpitApi from '@/api/investment/cockpit'

export default {
  name: "twoRing",
  components: {
    Echarts,
  },
  props: ['times'],
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      moneyList: [],
      proList: [],
      moneyOptions: {
        color: ["#4A78FF", "#242C41"],
        title: {
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 18,
                color: "#FFFFFF",
              },

              c: {
                fontSize: 10,
                color: "#ffffff"
              },
            },
          },
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockWise: false,
            radius: ["60%", "80%"],
            hoverAnimation: false,

            data: [],

            label: {
              show: false,
            },
          },
          {
            type: "pie",
            name: "最内层径向渐变圆心",
            clockWise: false,
            radius: "60%",
            center: ["50%", "50%"],
            z: 1,
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["58%", "58%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },

          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["82%", "82%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["99%", "99%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      },
      proOptions: {
        color: ["#4A78FF", "#242C41"],
        title: {
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 18,
                color: "#FFFFFF",
              },

              c: {
                fontSize: 10,
                color: "#ffffff"
              },
            },
          },
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockWise: false,
            radius: ["60%", "80%"],
            hoverAnimation: false,

            data: [],

            label: {
              show: false,
            },
          },
          {
            type: "pie",
            name: "最内层径向渐变圆心",
            clockWise: false,
            radius: "60%",
            center: ["50%", "50%"],
            z: 1,
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
            hoverAnimation: false,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["58%", "58%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },

          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["82%", "82%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            name: "最外层细圆环",
            hoverAnimation: false,
            clockWise: false,
            radius: ["99%", "99%"],
            itemStyle: {
              normal: {
                borderColor: "#4A78FF",
                borderWidth: 1,
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      },
    };
  },
  methods: {
    async initOptions() {
      const {data: moneyData} = await cockpitApi.getInvestmentProportion(this.paramsObj)     

      this.moneyList = moneyData.map(item => item.name)
      
      let titleText = moneyData.filter(item=>item.name == '完成')[0].proportion
      
      let seriesData = moneyData.map(item => {
        return {
          value: item.proportion
        }
      })

      this.$set(this.moneyOptions.title, 'text', "{a|" + titleText + "}{c|%}")
      this.$set(this.moneyOptions.series[0], 'data', seriesData)


      const {data: proData} = await cockpitApi.getProjectProportion(this.paramsObj)   

      this.proList = proData.map(item => item.name)

      let titleText2 = proData.filter(item=>item.name == '落地')[0].proportion
      
      let seriesData2 = proData.map(item => {
        return {
          value: item.proportion
        }
      })

      this.$set(this.proOptions.title, 'text', "{a|" + titleText2 + "}{c|%}")
      this.$set(this.proOptions.series[0], 'data', seriesData2)

    }
  }
}
</script>

<style lang="scss" scoped>
.two-ring {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .money-wrap,
  .project-wrap {
    width: 8.177vw;
    height: 100%;
    .title-box {
      margin: 0.26vw auto 1.042vw;
      width: 7.552vw;
      height: 1.823vw;
      color: #96d2f8;
      font-size: 0.833vw;
      text-align: center;
      line-height: 1.823vw;
      user-select: none;
      background: url("~@/assets/cockpit/title-money.png") no-repeat;
      background-size: 100% 100%;
    }
    .money-chart {
      width: 8.177vw;
      height: 8.177vw;
      margin-bottom: 0.781vw;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tip {
        font-size: 0.729vw;
        color: #E2F4FF;
        &::before {
          content: '';
          display: inline-block;
          width: 0.573vw;
          height: 0.573vw;
          border: 0.052vw solid #4A78FF;
          background-color: #4A78FF;
          margin-right: 0.417vw;
        }
      }
      .tip:nth-child(2) {
        &::before {
          content: '';
          background-color: #242C41;
        }
      }
    }
  }
}
</style>
